
import { useState, useEffect } from 'react';
import { Mic, Play, Square, Settings, BarChart } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

export default function AudioCollection() {
  const [isRecording, setIsRecording] = useState(false);
  const [recordingTime, setRecordingTime] = useState(0);
  const [audioLevel, setAudioLevel] = useState(0);
  const [waveformData, setWaveformData] = useState<number[]>([]);

  // Simulate audio level and waveform data
  useEffect(() => {
    const interval = setInterval(() => {
      if (isRecording) {
        setRecordingTime(prev => prev + 1);
        setAudioLevel(Math.random() * 100);
        setWaveformData(prev => [...prev.slice(-49), Math.random() * 100]);
      }
    }, 100);

    return () => clearInterval(interval);
  }, [isRecording]);

  const toggleRecording = () => {
    setIsRecording(!isRecording);
    if (!isRecording) {
      setRecordingTime(0);
      setWaveformData([]);
    }
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-white">音源采集</h2>
          <p className="text-gray-400">实时音频信号采集与录制管理</p>
        </div>
        <div className="flex space-x-3">
          <Button variant="outline" size="sm">
            <Settings className="w-4 h-4 mr-2" />
            设置
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        {/* Recording Control */}
        <div className="xl:col-span-2 space-y-6">
          <Card className="glass-card p-6">
            <h3 className="text-lg font-semibold mb-4 text-white">录制控制</h3>
            
            <div className="grid grid-cols-2 gap-4 mb-6">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">麦克风类型</label>
                <Select defaultValue="condenser">
                  <SelectTrigger className="input-advanced">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="condenser">电容麦克风</SelectItem>
                    <SelectItem value="dynamic">动圈麦克风</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">采样率</label>
                <Select defaultValue="44100">
                  <SelectTrigger className="input-advanced">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="44100">44100 Hz</SelectItem>
                    <SelectItem value="48000">48000 Hz</SelectItem>
                    <SelectItem value="96000">96000 Hz</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="text-center space-y-4">
              <div className="text-3xl font-mono text-white">
                {formatTime(Math.floor(recordingTime / 10))}
              </div>
              
              <Button
                onClick={toggleRecording}
                className={`w-20 h-20 rounded-full ${
                  isRecording 
                    ? 'bg-red-500 hover:bg-red-600' 
                    : 'btn-primary'
                }`}
              >
                {isRecording ? (
                  <Square className="w-8 h-8" />
                ) : (
                  <Mic className="w-8 h-8" />
                )}
              </Button>
              
              <div className="text-sm text-gray-400">
                {isRecording ? '录制中...' : '点击开始录制'}
              </div>
            </div>
          </Card>

          {/* Waveform Display */}
          <Card className="glass-card p-6">
            <h3 className="text-lg font-semibold mb-4 text-white">实时波形</h3>
            <div className="h-32 bg-black/20 rounded-lg p-4 flex items-end justify-between space-x-1">
              {Array.from({ length: 50 }, (_, i) => (
                <div
                  key={i}
                  className="waveform-bar bg-gradient-to-t from-green-500 to-emerald-400 rounded-sm"
                  style={{
                    height: `${(waveformData[i] || 0) * 0.8}%`,
                    minHeight: '2px',
                    width: '2%',
                    animationDelay: `${i * 20}ms`,
                  }}
                />
              ))}
            </div>
          </Card>
        </div>

        {/* Audio Level Meter and Statistics */}
        <div className="space-y-6">
          <Card className="glass-card p-6">
            <h3 className="text-lg font-semibold mb-4 text-white">音频电平</h3>
            <div className="space-y-4">
              <div className="text-center">
                <div className="text-2xl font-bold text-green-400">
                  {audioLevel.toFixed(1)} dB
                </div>
                <div className="text-sm text-gray-400">当前电平</div>
              </div>
              
              <div className="w-full bg-gray-700 rounded-full h-4">
                <div
                  className="bg-gradient-to-r from-green-500 to-red-500 h-4 rounded-full transition-all duration-100"
                  style={{ width: `${audioLevel}%` }}
                />
              </div>
              
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div className="text-center">
                  <div className="text-green-400 font-semibold">峰值</div>
                  <div className="text-gray-300">85.2 dB</div>
                </div>
                <div className="text-center">
                  <div className="text-blue-400 font-semibold">平均</div>
                  <div className="text-gray-300">62.8 dB</div>
                </div>
              </div>
            </div>
          </Card>

          <Card className="glass-card p-6">
            <h3 className="text-lg font-semibold mb-4 text-white">采集统计</h3>
            <div className="space-y-3">
              <div className="flex justify-between">
                <span className="text-gray-400">今日录制</span>
                <span className="text-white">24 次</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-400">总时长</span>
                <span className="text-white">2.5 小时</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-400">文件大小</span>
                <span className="text-white">1.2 GB</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-400">平均质量</span>
                <span className="text-green-400">优秀</span>
              </div>
            </div>
          </Card>

          <Card className="glass-card p-6">
            <h3 className="text-lg font-semibold mb-4 text-white">设备状态</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-gray-400">麦克风</span>
                <div className="status-indicator status-active"></div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-400">音频接口</span>
                <div className="status-indicator status-active"></div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-400">存储空间</span>
                <div className="status-indicator status-warning"></div>
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* Recording History */}
      <Card className="glass-card p-6">
        <h3 className="text-lg font-semibold mb-4 text-white">采集记录</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-700">
                <th className="text-left py-3 text-gray-400">开始时间</th>
                <th className="text-left py-3 text-gray-400">结束时间</th>
                <th className="text-left py-3 text-gray-400">时长</th>
                <th className="text-left py-3 text-gray-400">文件大小</th>
                <th className="text-left py-3 text-gray-400">状态</th>
              </tr>
            </thead>
            <tbody>
              {[
                { start: '2023-11-01 12:50:00', end: '2023-11-01 12:53:00', duration: '03:00', size: '45MB', status: '完成' },
                { start: '2023-11-01 14:20:00', end: '2023-11-01 14:25:00', duration: '05:00', size: '75MB', status: '完成' },
                { start: '2023-11-01 16:30:00', end: '2023-11-01 16:32:00', duration: '02:00', size: '30MB', status: '完成' },
              ].map((record, index) => (
                <tr key={index} className="border-b border-gray-800">
                  <td className="py-3 text-gray-300">{record.start}</td>
                  <td className="py-3 text-gray-300">{record.end}</td>
                  <td className="py-3 text-gray-300">{record.duration}</td>
                  <td className="py-3 text-gray-300">{record.size}</td>
                  <td className="py-3">
                    <span className="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">
                      {record.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}
